/*
 * @Author: your name
 * @Date: 2021-05-22 22:41:16
 * @LastEditTime: 2021-05-31 20:07:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/pages/room/index.tsx
 */
import { Button, Card, Space, Tag, Modal, Table } from 'antd';
import React, { useEffect } from 'react';
import './index.less';
import { get_box_project, start_project } from '../../services/pages';
import { useRequest } from '@/.umi/plugin-request/request';
import useObj from '@/use/useObj';
import { ProjectStatus } from '@/enum';
import { secondsToMinSec } from '@/utils/utils';
import _ from 'lodash';
import Countdown from 'react-countdown';
import moment from 'moment';
import CountDown from '@/components/countDown';
import AddProjectModal from './addProjectModal';
import { formatDateTime } from '../../utils/utils';
import { globalModel } from '../globalModel';
import { observer } from 'mobx-react';

interface IProps {}

const RoomPage = (props: IProps) => {
  const [obj, setObj] = useObj({
    visible: false,
    refresh: null,
    row: null,
  });

  const { data, error, loading } = useRequest(() => get_box_project({}), {
    refreshDeps: [obj.refresh],
  });

  useEffect(() => {
    if (
      globalModel.receivedMsg?.type === 'PROJECT_ADD' ||
      globalModel.receivedMsg?.type === 'PROJECT_START' ||
      globalModel.receivedMsg?.type === 'PROJECT_APPOINTMENT' ||
      globalModel.receivedMsg?.type === 'PROJECT_CANCEL'
    ) {
      setObj({ refresh: Symbol() });
    } else if (
      globalModel.receivedMsg?.type === 'BELL_DISAGREE' ||
      globalModel.receivedMsg?.type === 'BELL_AGREE'
    ) {
      Modal.confirm({
        title: '结果通知',
        content: globalModel.receivedMsg.message,
        onOk: () => {
          setObj({ refresh: Symbol() });
        },
        onCancel: () => {
          setObj({ refresh: Symbol() });
        },
      });
    }
  }, [globalModel.receive]);

  const columns = [
    {
      key: 'project_name',
      dataIndex: 'project_name',
      title: '项目名称',
    },
    {
      key: 'during',
      dataIndex: 'during',
      title: '项目时长',
      render: (text) => {
        return text / 60;
      },
    },
    {
      key: 'staff_name',
      dataIndex: 'staff_name',
      title: '技师',
    },
    {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
      render: (text) => {
        return ProjectStatus[text as keyof typeof ProjectStatus];
      },
    },
    {
      key: 'start_time',
      dataIndex: 'start_time',
      title: '开始时间',
      render: (text, record) => {
        return formatDateTime(text);
      },
    },
    {
      key: 'surplus_time',
      dataIndex: 'surplus_time',
      title: '剩余时间',
      render: (text, record) => {
        return text && <CountDown total={record.surplus_time} diff={1000} />;
      },
    },
    {
      key: 'opt',
      dataIndex: 'opt',
      title: '操作',
      render: (text, record) => {
        return (
          <Space>
            {record.status === 1 && (
              <Button
                type="primary"
                onClick={() => {
                  setObj({ visible: true, row: record });
                }}
              >
                申请加钟
              </Button>
            )}
            {record.status === 0 && (
              <Button
                type="primary"
                onClick={() => startProject(record.schedule_id)}
              >
                开始项目
              </Button>
            )}
          </Space>
        );
      },
    },
  ];

  const startProject = async (schedule_id: number) => {
    Modal.confirm({
      title: '开始项目!',
      content: '点击确定开始计时',
      onOk: async () => {
        await start_project({ schedule_id: schedule_id });
        setObj({ refresh: Symbol() });
      },
    });
  };

  return (
    <Card title={`房间名称`} className="room-page-container">
      <Table
        rowKey={(record) => record.schedule_id}
        loading={loading}
        columns={columns}
        dataSource={data?.results}
      />
      {obj.visible && (
        <AddProjectModal
          row={obj.row}
          visible={obj.visible}
          close={() => setObj({ visible: false })}
          refresh={() => setObj({ refresh: Symbol() })}
        />
      )}
    </Card>
  );
};
export default observer(RoomPage);
